<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 1.使用setTimeout模拟网络请求的回调地狱
        // setTimeout(() => {
        //         console.log('hello promise!');
        //         console.log('hello promise!');
        //         console.log('hello promise!');
        //         console.log('hello promise!');
        //         console.log('hello promise!');

        //         setTimeout(() => {
        //             console.log('hello cgs!');
        //             console.log('hello cgs!');
        //             console.log('hello cgs!');
        //             console.log('hello cgs!');
        //             console.log('hello cgs!');

        //             setTimeout(() => {
        //                 console.log('hello thtm!');
        //                 console.log('hello thtm!');
        //                 console.log('hello thtm!');
        //                 console.log('hello thtm!');
        //                 console.log('hello thtm!');
        //             }, 1000)
        //         }, 1000)
        //     }, 1000)

        /*  
           什么情况下会用到Promise？
            一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
        */

        // 2.Promise就是一个类，它对异步操作进行了封装
        // 参数 -> 函数
        // resolve和reject也是函数
        // 链式编程
        new Promise((resolve, reject) => {
            // 第一次网络请求的代码
            setTimeout(() => {
                // 成功的时候调用resolve
                resolve('hello promise!')
            }, 1000)
        }).then((data) => {
            // 第一次拿到结果的处理代码
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);

            return new Promise((resolve, reject) => {
                // 第二次网络请求的代码
                setTimeout(() => {
                    // 成功的时候调用resolve
                    resolve('hello cgs!')
                }, 1000)
            })
        }).then((data) => {
            // 第二次拿到结果的处理代码
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);

            return new Promise((resolve, reject) => {
                // 第三次网络请求的代码
                setTimeout(() => {
                    // 成功的时候调用resolve
                    //resolve('hello thtm!')

                    // 失败的时候调用reject
                    reject('error message!')
                }, 1000)
            })
        }).then((data) => {
            // 第三次拿到结果的处理代码
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);
            console.log(data);
        }).catch((err) => { // 调用reject后使用catch捕获异常信息
            console.log(err);
            console.log(err);
            console.log(err);
            console.log(err);
            console.log(err);
        })
    </script>
</body>

</html>